<template>
    <div class="box">
      <div class="top">
        <img :src="teacher.img" alt="">
        <div class="info">
          <h3>{{teacher.name}}</h3>
          <p>{{teacher.rank}}</p>
        </div>
      </div>
      <div class="item">
        <div class="title">
          <h3>介绍</h3>
        </div>
        <p class="intro" v-html="teacher.des">
        </p>
      </div>
      <div class="item">
        <div class="title">
          <h3>主讲课程</h3>
          <div class="course" v-for="(citem, index) in courseList" :key="index" @click="$router.push({path:'./coursedetail',query:{}})">
            <img :src="citem.img" alt="">
            <div class="cinfo">
              <h3>{{citem.courseName}}</h3>
              <p class="price">{{citem.price}}</p>
              <p class="cintro">{{citem.courseIntro}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import * as info from '../api/info'

export default {
  name: 'teacher-detail',
  data: function () {
    return {
      name: '张雪峰',
      img: '../../static/images/teacher.jpg',
      rank: '高级讲师',
      intro: '1: 来自德国，从事英语口语教育十余年。 2：多所中国著名国际院校的资深外教。 3：发音纯正，擅长少儿自然自拼读。 4：著名外教培训指导老师。 5：教学风格和蔼可亲，生动有趣，推崇在“玩中学，学中玩”。打破常规教学，让学员体验国外真实教学。',
      course: [
        {
          img: '../../static/images/pic.jpg',
          courseName: '旅游英语',
          price: '255.00',
          courseIntro: '英语语法突破五步法突破五步法突破五步法突破五步法英语语法突破五步法'
        },
        {
          img: '../../static/images/pic.jpg',
          courseName: '旅游英语',
          price: '255.00',
          courseIntro: '英语语法突破五步法突破五步法突破五步法突破五步法英语语法突破五步法'
        }
      ],
      teacher: {},
      courseList: {}
    }
  },
  mounted () {
    this.getTeacher()
  },
  methods: {
    getTeacher () {
      const id = this.$route.query.id
      console.log(111,id)
      info.getTeacher(id).then(res => {
        console.log(res)
        this.teacher = res.data
        this.getCourse(res.data.id)
      })
    },
    getCourse (teacherId) {
      info.getTeacherCustomer(teacherId).then(res => {
        this.courseList = res.data
      })
    }
  }
}
</script>

<style scoped>
.box{
  padding: .4rem 0;
}
.top{
  display: flex;
  align-items: flex-start;
  padding: .3rem;
}
.top img{
  width: 2.8rem;
  margin-right: .3rem;
}
.top .info{
  flex-grow: 1;
  padding-top: .16rem;
}
.top .info h3{
  font-size: .44rem;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #000;
}
.top .info p{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: .46rem;
  margin-top: .2rem;
  font-size: .34rem;
}
.item{
  margin-bottom: .4rem;
}
.title{
  height: .9rem;
  line-height: .9rem;
  background: #f5f5f5;
  padding: 0 .3rem;
}
.title>h3{
  font-size: .44rem;
  color: #555;
  position: relative;
  padding-left: .3rem;
}
.title h3:before{
  content: '';
  position: absolute;
  top: 15%;
  left: 0;
  border-left: 2px solid #ddd;
  height: 70%;
}
.item .intro{
  line-height: .58rem;
  font-size: .36rem;
  padding: .2rem .3rem;
}
.course{
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: .3rem .3rem;
}
.course img{
  display: block;
  width: 3.4rem;
  height: 2.54rem;
  flex-shrink: 0;
  margin-right: .3rem;
}
.cinfo{
  width: 5.7rem;
}
.cinfo h3{
  line-height: .54rem;
  font-size: .42rem;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #000;
}
.cinfo .price{
  color: #ed702d;
  font-size: .42rem;
  font-weight: bold;
}
.cinfo .cintro{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: .46rem;
  margin-top: .2rem;
  font-size: .32rem;
}
</style>
